import styles from './index.module.scss'
import Icon from '@/components/Icon'
import { Dialog, Toast } from 'antd-mobile'
import { useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '@/store'
import {
  setArticleDislikes,
  setArticleMark,
  setArticleReports,
} from '@/store/action/article'
import { toString } from 'lodash'

export default function ArticleMark() {
  const dispatch = useDispatch()

  const {
    mark: { article_id, visible },
  } = useSelector((state: RootState) => state.article)

  const [type, setType] = useState<'junk' | ''>('')
  // 菜单类型  junk 为反馈垃圾内容面板
  // 举报反馈菜单
  const reports = [
    { id: 0, title: '其他问题' },
    { id: 1, title: '标题夸张' },
    { id: 2, title: '低俗色情' },
    { id: 3, title: '错别字多' },
    { id: 4, title: '旧闻重复' },
    { id: 5, title: '广告软文' },
    { id: 6, title: '内容不适' },
    { id: 7, title: '涉嫌违法犯罪' },
    { id: 8, title: '侵权' },
  ]

  const handleClose = () => {
    console.log('点击了遮罩层，需要实现关闭')
    dispatch(setArticleMark({ visible: false }))
  }

  const handleDislike = async () => {
    console.log('点击了不喜欢')
    await dispatch(setArticleDislikes(article_id))
    Toast.show({ content: '操作成功', duration: 1000 })
    handleClose()
  }

  const handleReport = async (type: number) => {
    console.log('点击了文章举报')
    console.log(toString(type))
    await dispatch(setArticleReports(article_id, toString(type)))
    Toast.show({ content: '操作成功', duration: 1000 })
    handleClose()
  }

  return (
    <Dialog
      bodyClassName={styles.root}
      visible={visible}
      onClose={handleClose}
      closeOnMaskClick
      content={
        <div className="more-action">
          {/* 默认菜单内容 */}
          <div hidden={type === 'junk'}>
            <div className="action-item" onClick={handleDislike}>
              <Icon type="iconicon_unenjoy1" /> 不感兴趣
            </div>
            <div className="action-item" onClick={() => setType('junk')}>
              <Icon type="iconicon_feedback1" />
              <span className="text">反馈垃圾内容</span>
              <Icon type="iconbtn_right" />
            </div>
            <div className="action-item">
              <Icon type="iconicon_blacklist" /> 拉黑作者
            </div>
          </div>

          {/* 反馈垃圾内容 */}
          <div hidden={type !== 'junk'}>
            <div className="action-item" onClick={() => setType('')}>
              <Icon type="iconfanhui" />
              <span className="back-text">返回</span>
            </div>
            {reports.map((item) => (
              <div
                key={item.id}
                className="action-item"
                onClick={() => handleReport(item.id)}
              >
                {item.title}
              </div>
            ))}
          </div>
        </div>
      }
    />
  )
}
